<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">退住记录</text>
    </view>

    <!-- 搜索与筛选图标 -->
    <view class="search-filter-wrapper">
      <view class="search-wrapper">
        <input
          class="search-input"
          v-model="searchKey"
          placeholder="搜索客户名称"
          confirm-type="search"
          @confirm="onSearch"
        />
        <image class="search-icon" src="../../static/icons/search.png" />
      </view>
      <view class="icons">
        <image
          src="../../static/icons/filter.png"
          class="icon"
          @tap="toggleFilters"
        />
      </view>
    </view>

    <!-- 筛选项，点击图标展开 -->
    <view class="filter-row" v-if="showFilters">
      <picker mode="selector" :range="statusOptions" @change="onStatusChange">
        <view class="filter-btn">{{ statusOptions[statusIndex] }}</view>
      </picker>
      <picker mode="selector" :range="typeOptions" @change="onTypeChange">
        <view class="filter-btn">{{ typeOptions[typeIndex] }}</view>
      </picker>
    </view>

    <!-- 退住卡片列表 -->
    <scroll-view class="record-list" scroll-y>
      <template v-if="filteredRecords.length">
        <CheckoutRecordCard
          v-for="rec in filteredRecords"
          :key="rec.checkOutId"
          :record="rec"
          @updated="fetchRecords"
        />
      </template>
      <view v-else class="no-record">
        <text>暂无退住记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import CheckoutRecordCard from '@/components/CheckoutRecordCard.vue'
import { getCheckoutRecordList } from '@/api/client'

export default {
  name: 'CheckoutRecordList',
  components: { CheckoutRecordCard },
  data() {
    return {
      customerId: null,
      customerName: '',
      searchKey: '',
      showFilters: false,
      statusOptions: ['全部', '已提交', '未通过', '已通过', '已取消'],
      statusIndex: 0,
      typeOptions: ['全部', '正常退住', '死亡退住', '保留床位'],
      typeIndex: 0,
      records: []
    }
  },
  computed: {
    filteredRecords() {
      let list = this.records
      const key = this.searchKey.trim().toLowerCase()
      if (key) {
        list = list.filter(r =>
          r.customerName.toLowerCase().includes(key)
        )
      }
      if (this.statusIndex > 0) {
        list = list.filter(r => r.approvalStatus === this.statusIndex)
      }
      if (this.typeIndex > 0) {
        list = list.filter(r => r.type === this.typeIndex)
      }
      return list
    }
  },
  async onLoad(options) {
    this.customerId = options.customerId
    this.customerName = decodeURIComponent(options.customerName || '')
    await this.fetchRecords()
  },
  methods: {
    async fetchRecords() {
      try {
        const resp = await getCheckoutRecordList({
          page: 1,
          pageSize: 100,
          customerId: this.customerId
        })
        this.records = resp.data.records || []
      } catch (err) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    onSearch() {
      // 只做本地过滤，无需重拉
    },
    toggleFilters() {
      this.showFilters = !this.showFilters
    },
    onStatusChange(e) {
      this.statusIndex = +e.detail.value
    },
    onTypeChange(e) {
      this.typeIndex = +e.detail.value
    }
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  height: 100%;
  background-color: #f1f9f9;
}
.nav-bar {
  display: flex;
  align-items: center;
  height: 130px;
  padding-top: 45px;
  padding: 0 16px;
  background-image: url('/static/images/background1.png');
  background-size: cover;
  background-position: center;
}
.nav-title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.search-filter-wrapper {
  display: flex;
  align-items: center;
  margin: 12px 16px;
}
.search-wrapper {
  position: relative;
  margin: 3px 16px;
  margin-bottom: -5px;
}
.search-input {
	width: 250px;
  height: 36px;
  padding: 0 36px 0 12px;
  border-radius: 18px;
  border: none;
  background-color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}
.icons {
  margin-left: 8px;
}
.icon {
  width: 20px;
  height: 20px;
}
.filter-row {
  display: flex;
  justify-content: space-around;
  margin: 8px 16px 12px;
}
.filter-btn {
  padding: 6px 12px;
  background-color: #fff;
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.record-list {
  flex: 1;
  padding-bottom: 56px;
}
.no-record {
  margin-top: 60px;
  text-align: center;
  color: #999;
  font-size: 16px;
}
</style>